<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="move()">点击我</button>
    <div>
        <span>哈哈我是老大</span>
    </div>
    <script>
        // 找到要操作的所有元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var span = div.querySelector('span');
        // 移动
        function move() {
            div.insertBefore(btn, span);
        }
    </script>
    <ul>
        <li>xxx <button>删除</button></li>
    </ul>
    <!-- 
        ○ 白菜  
        ○ 青菜
        ○ 萝卜
        ○ 青椒
    -->
    <button onclick="deleteQingcai()">删除列表中的青菜</button>
    <script>
        var ul = document.createElement('ul');
        ul.type = 'circle';
        document.body.appendChild(ul);
        function createLi(name){
            var li = document.createElement('li');
            li.innerText = name;
            ul.appendChild(li);
        }
        createLi('白菜')
        createLi('青菜')
        createLi('萝卜')
        createLi('青椒')
        // 创建好苦瓜和西瓜
        var kugua = document.createElement('li');
        kugua.innerText = '苦瓜';
        var xigua = document.createElement('li');
        xigua.innerText = '西瓜';
        // 获取白菜所在li
        var allLis = ul.querySelectorAll('li');// 直接获取所有的li
        var baiCaiLi = allLis[0];
        //将苦瓜插入到白菜前面
        ul.insertBefore(kugua,baiCaiLi)
        console.log(allLis)
        // 需要重新获取
        // allLis = ul.querySelectorAll('li');// 直接获取所有的li
        var last = allLis[allLis.length - 1];//获取最有一个下标
        // 将西瓜插入到青椒前面
        ul.insertBefore(xigua,last);

        // 
        function deleteQingcai(){
            var allLi = ul.querySelectorAll('li');
            // 获取青菜元素
            var qingcaiLi = allLi[2];
            //删除
            ul.removeChild(qingcaiLi);
        }
    </script>
</body>

</html>